<template>
  <at-ta :members="members" name-key="name"  >
    <template slot="item" slot-scope="s">
      <span v-text="s.item.name"></span>
    </template>
    <el-input ref="inputbox" :placeholder="placeholder" :readonly="disabled" v-model="data[contentKey]"
              type="textarea" :autosize="getAutoRows()" @change="onchange"></el-input>
<!--    {{data[contentKey]}}-->
  </at-ta>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import AtTa from 'vue-at/dist/vue-at-textarea'

  export default {
    data () {
      return {
      }
    },
    props:{
      data:{
        default: function(){ return {}},
        type:Object
      },
      rows:{
        default: function(){ return 2},
        type:Number
      },
      placeholder:{
        default: function(){ return ''},
        type:String
      },
      members:{
        default: function(){ return []},
        type:Array
      },
      contentKey:{
        default: function(){ return 'content'},
        type:String
      },
      avatarsKey:{
        default: function(){ return 'avatars'},
        type:String
      },
      maxNumber:{
        default: 1000,
        type:Number
      },
      disabled:{
        default: function(){ return false},
        type:Boolean
      }
    },
    components:{
      AtTa
    },
    mixins: [dingMixin],
    created(){

    },
    methods: {
      getAutoRows(){
        return { minRows: this.rows, maxRows: this.rows * 2};
      },
      addAvatar(v){
        if(this.data[this.avatarsKey].indexOf(v)<0){
          this.data[this.avatarsKey]+= "," + v;
        }
        console.log(v);
/*        setTimeout(()=>{
          this.$nextTick(()=>{
            console.log(this.$refs.inputbox.getInput().value);
            this.data[this.contentKey] = this.$refs.inputbox.getInput().value;
          });
        }, 100)*/
      },
      getDingEmpIds(){
        let ids = [];
        for(let i of this.avatars){
          if(i.emplId){
            ids.push(i.emplId);
          }
          else{
            ids.push(i.dingId);
          }
        }
        return ids;
      },
      onchange(){
        this.$emit('change');
      }
    }
  }
</script>
<style scoped>
  .editor {
    width:100%;
    height:50px;
    border: lightgray solid 1px;
    padding: 3px;
    overflow-y: scroll;
    border-radius: 3px;
  }

  .avatar{
    width: 18px;
    height: auto;
    margin-right: 15px;
    border-radius: 100%;
    vertical-align: middle;
  }
</style>
